<template>
  <div class="offline">
    <!-- 面包屑 -->
    <Headline
      :headline1="$t('m.AccessAdmin') + '  /  '"
      :headline2="$t('m.OfflineList')"
    ></Headline>
    <a-card style="width: 100%">
      <div class="lass-flex">
        <a-select
          class="select-a"
          v-model="formunitdata.orgType"
          @change="handleSelectChange"
        >
          <a-select-option value="3"> 学生</a-select-option>
          <a-select-option value="1"> 职工 </a-select-option>
        </a-select>
        <!-- <a-tree-select
          v-model="value"
          show-search
          style="width: 20%; height: 32px; margin-left: 15px"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          placeholder="Please select"
          allow-clear
          @change="checked"
          tree-default-expand-all
        >
      
          <a-tree-select-node
            v-for="item in items"
            :key="item.id"
            :cont="item"
            :value="item.custorgname"
            :title="item.custorgname"
          >
            <a-tree-select-node
              v-for="int in item.children"
              :key="int.id"
              :cont="int"
              :value="int.custorgname"
              :title="int.custorgname"
            >
              <a-tree-select-node
                v-for="ins in int.children"
                :key="ins.id"
                :cont="ins"
                :value="ins.custorgname"
                :title="ins.custorgname"
              />
            </a-tree-select-node>
          </a-tree-select-node>
        </a-tree-select> -->
        <SelectTree @checkData="checked" style="height: 33px; margin-left: 15px"></SelectTree>
        <a-select
          class="select-a"
          style="margin-left: 15px"
          v-model="fostlist.downStatus"
          @change="offSelectChange"
        >
          <a-select-option
            v-for="item in diction"
            :value="item.code"
            :key="item.code"
          >
            {{ item.name }}
          </a-select-option>
        </a-select>
        <a-input-search
          :placeholder="$t('m.PleaseEnterYourSearchTerms')"
          style="width: 200px; margin-left: 15px"
          size="default"
          @search="offSearch"
          v-model="fostlist.key"
        />
        <div class="chend">
          <a-checkbox :defaultChecked="fostlist.vChild" @change="lineChange">
            {{ $t("m.WhetherToDisplayChildNodes") }}
          </a-checkbox>
        </div>
        <div class="btn-dispos">
          <a-button
            class="btn-dispo"
            style="width: 100%; height: 32px"
            type="primary"
            @click="unitbtn"
            >{{ $t("m.MergerOfAuthorization") }}</a-button
          >
        </div>
        <div class="btn-dispos">
          <a-button
            class="btn-dispo"
            style="width: 100%; height: 32px"
            type="primary"
            @click="downbtn"
            >{{ $t("m.ReDownload") }}</a-button
          >
        </div>
      </div>
      <a-table
        style="margin-top: 15px; overflow-x: auto"
        :rowKey="(r, i) => r.devid"
        :columns="column"
        :data-source="datas"
        bordered
        :pagination="false"
        :row-selection="{
          onChange: perSelectChange,
          type: 'checkbox',
          selectedRowKeys: setsclete,
        }"
        :scroll="{ x: 2000 }"
      >
        <div slot="tags" slot-scope="text, tags, i">
          <a class="flex-a" href="#" @click="unitdelete(text, tags, i)">{{
            $t("m.Delete")
          }}</a>
        </div>
      </a-table>
      <a-pagination
        class="pages"
        show-size-changer
        :default-current="1"
        :total="total"
        @change="setPages"
        :pageSizeOptions="['5', '10', '30', '40']"
        @showSizeChange="setShowSizeChange"
      />
    </a-card>
    <Delete ref="delete" :dalete="dalete" @confirm="ondelete"></Delete>
  </div>
</template>

<script>
import Headline from "@/components/Headline";
import Modal from "@/components/common/Modal";
import Delete from "@/components/Delete";
import { getPerages } from "../../../../api/perAges";
import { getdiction } from "../../../../api/dictionaries";
import {
  getAuthorizeList,
  getreDownload,
} from "../../../../api/entrance/entranceguard";
import SelectTree from "@/components/common/SelectTree";
export default {
  name: "OffLine",
  components: {
    Headline,
    Modal,
    Delete,
    SelectTree,
  },
  data() {
    return {
      value: "",
      items: [],
      formunitdata: {
        orgType: "1",
        key: "",
      },
      fostlist: {
        downStatus: "-1",
        orgCode: "",
        key: "",
        vChild: true,
        start: 0,
        limit: 10,
        page: 1,
      },
      fromdic: {
        groupcode: "SYS0000025",
        insertall: "-1|全部",
        where: "code<> -1 and code <> -100",
      },
      diction: [],
      setsclete: [],
      // 配置数据
      column: [
        {
          title: this.$t("m.DownloadStatus"),
          dataIndex: "statusname",
        },
        {
          title: this.$t("m.jobnumber"),
          dataIndex: "stafforstucode",
        },
        {
          title: this.$t("m.Name"),
          dataIndex: "stafforstuname",
        },
        {
          title: this.$t("m.CardNumber"),
          dataIndex: "cardno",
        },
        {
          title: this.$t("m.deviceNumber"),
          dataIndex: "machineid",
        },
        {
          title: this.$t("m.EquipmentName"),
          dataIndex: "devname",
        },
        {
          title: this.$t("m.NumberOfGate1Period"),
          dataIndex: "door1",
          customRender: function (text, record, index) {
            let subid = text.split(",");
            let arr = [];
            subid.map((item, index) => {
              if (item == 1) {
                arr.push(index + 1);
              }
            });
            return arr.join(",");
          },
        },
        {
          title: this.$t("m.NumberOfGate2Period"),
          dataIndex: "door2",
          customRender: function (text, record, index) {
            let subid = text.split(",");
            let arr = [];
            subid.map((item, index) => {
              if (item == 1) {
                arr.push(index + 1);
              }
            });
            return arr.join(",");
          },
        },
        {
          title: this.$t("m.NumberOfGate3Period"),
          dataIndex: "door3",
          customRender: function (text, record, index) {
            let subid = text.split(",");
            let arr = [];
            subid.map((item, index) => {
              if (item == 1) {
                arr.push(index + 1);
              }
            });
            return arr.join(",");
          },
        },
        {
          title: this.$t("m.NumberOfGate4Period"),
          dataIndex: "door4",
          customRender: function (text, record, index) {
            let subid = text.split(",");
            let arr = [];
            subid.map((item, index) => {
              if (item == 1) {
                arr.push(index + 1);
              }
            });
            return arr.join(",");
          },
        },
        {
          title: this.$t("m.MergerOfAuthorization"),
          dataIndex: "authwayname",
        },
        {
          title: this.$t("m.periodofvalidity"),
          dataIndex: "createdate",
        },
        {
          title: this.$t("m.handleEvent"),
          dataIndex: "enddate",
        },
        {
          title: this.$t("m.ProcessingTimes"),
          dataIndex: "downnum",
        },
        {
          title: this.$t("m.theResults"),
          dataIndex: "stafforstudinfoid",
        },
        {
          title: this.$t("m.Operation"),
          key: "tags",
          // dataIndex: "address",
          scopedSlots: { customRender: "tags" },
        },
      ],
      datas: [],
      total: 0,
      dalete: {
        titles: this.$t("m.DownloadPrompt"),
        type: "exclamation-point",
        text: this.$t("m.AreYouSureToReDownload"),
      },
      ids: "",
    };
  },
  created() {
    // 请求数据
    this._getdiction();
    getPerages({ params: this.formunitdata }).then((res) => {
      console.log(res);
      if (res.data) {
        this.items = res.data;
        this.fostlist.orgCode = res.data[0].ymorgtreecode;
        this.chend();
      }
    });
  },
  methods: {
    //获取字典
    _getdiction() {
      getdiction({ params: this.fromdic }).then((res) => {
        console.log(res);
        this.diction = res.data.data;
      });
    },

    chend() {
      getAuthorizeList({ params: this.fostlist }).then((res) => {
        console.log(res);
        this.total = res.data.total;
        this.datas = res.data.data;
      });
    },
    //tree选中
    checked(value) {
      this.fostlist.orgCode = value.ymorgtreecode
      this.chend()
    },
    //下拉选中执行
    handleSelectChange() {
      this._getPerages();
    },
    //搜索
    offSearch() {
      this.chend();
    },
    offSelectChange() {
      this.chend();
    },
    //合并授权
    unitbtn() {},
    //重新下载
    downbtn() {
      this.$refs.delete.visible = true;
    },
    //确定
    ondelete() {
      getreDownload({ ids: this.ids })
        .then((res) => {
          const msg = res.data.msg;
          if (res.data.success) {
            this.$message.success(msg);
          } else {
            this.$message.error(msg);
          }
        })
        .catch((err) => {
          console.log(err);
        });
      this.$refs.delete.visible = false;
    },
    //表单选中
    perSelectChange(select, text) {
      console.log(select, text);
      this.setsclete = select;
      let str = select.join(",");
      this.ids = str;
    },
    //子节点
    lineChange() {
      this.fostlist.vChild = !this.fostlist.vChild;
      this.chend();
    },

    // 分页操作功能
    setShowSizeChange(page, limit) {
      this.fostlist.page = page;
      this.fostlist.limit = limit;
      this.fostlist.start = (page - 1) * limit;
      this._getDeviceList();
    },
    setPages(page, pageSize) {
      this.fostlist.page = page;
      this.fostlist.limit = pageSize;
      this.fostlist.start = (page - 1) * pageSize;
      this._getDeviceList();
    },
  },
};
</script>

<style scoped lang="scss">
.lass-flex {
  display: flex;
  align-items: center;
}
.select-a {
  width: 100px;
}
.chend {
  margin-left: 15px;
}
.btn-dispos {
  margin-left: 15px;
}
/deep/ .ant-spin-nested-loading {
  width: 2000px;
}
/deep/ .ant-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
</style>